<template>
  <div style="width: content-box;margin-left: 10px">
    姓名:
    <el-input type="text"
              v-model="searchData.nickName"
              clearable="clearable"
              style="width: 100px;"
    />
    QQ:
    <el-input type="text"
              v-model="searchData.qq"
              clearable="clearable"
              style="width: 100px;"
    />
    电话:
    <el-input type="text"
              v-model="searchData.phone"
              clearable="clearable"
              style="width: 100px;"
    />
    部门:
    <el-select v-model="searchData.department" class="m-2" placeholder="Select"
               clearable="clearable">
      <el-option
          v-for="item in departmentInfo.arr"
          :key="item.id"
          :label="item.departmentName"
          :value="item.id"
      />
    </el-select>
    <el-button @click="searchInfo()">搜索</el-button>
    <el-button @click="departmentDialog = true">部门管理</el-button>
  </div>
  <el-table
      :data="tableData"
      border
      style="width: 100%">
    <el-table-column
        prop="id"
        label="ID"
        width="180">
    </el-table-column>
    <el-table-column
        prop="nickName"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="qqInfo"
        label="QQ"
        width="180">
    </el-table-column>
    <el-table-column
        prop="email"
        label="邮箱"
        width="180">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="电话"
        width="180">
    </el-table-column>
    <el-table-column
        prop="department"
        label="部门"
        width="180">
      <template v-slot="scope">
        {{ replaceCode(scope.row.department) }}
      </template>
    </el-table-column>
    <el-table-column
        prop="college"
        label="学院"
        width="180">
    </el-table-column>
    <el-table-column
        prop="grade"
        label="年级"
        width="180">
    </el-table-column>

    <el-table-column
        prop="isEnable"
        label="是否可用"
        width="120">
      <template v-slot="scope">
        <el-switch
            v-model="scope.row.isEnable"
            :active-value="0"
            :inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            @change="userInfoChange(scope.row.id)"
        >
        </el-switch>
      </template>
    </el-table-column>
    <el-table-column
    prop="操作"
    label="操作">
      <template v-slot="scope">
        <el-button @click="showSetDepartmentDialog(scope.row.id)">设置部门</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
      v-model:currentPage=searchData.pageNum
      v-model:page-size=searchData.pageSize
      :page-sizes="[10, 20, 30, 40]"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total=tableSize
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
  />
  <el-dialog
      v-model="centerDialogVisible"
      title="Notice"
      width="30%"
      destroy-on-close
      center
  >
    <span
    >确认进行该操作？</span
    >
    <div>
      <strong>Extra content (Not rendered)</strong>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="modify(false)">Cancel</el-button>
        <el-button type="primary" @click="modify(true)"
        >Confirm</el-button
        >
      </span>
    </template>
  </el-dialog>

  <el-dialog
      v-model="departmentDialog"
      title="部门管理"
      width="30%"
      destroy-on-close
      center>
    <el-button @click="departmentDialogAdd = true">添加部门</el-button>
    <el-table
        :data="departmentInfo.arr"
        border
        style="width: 100%">
      <el-table-column
          prop="id"
          label="ID"
          width="180">
      </el-table-column>
      <el-table-column
          prop="departmentName"
          label="名称"
          width="180">
      </el-table-column>
      <el-table-column
          prop="操作"
          label="操作">
        <template v-slot="scope">
          <el-button @click="deleteDepartmentFun(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>

  <el-dialog
      v-model="departmentDialogAdd"
      title="添加部门"
      width="30%"
      destroy-on-close
      center>
    部门名字:
    <el-input v-model="addDepartmentName.department"></el-input>
    <el-button @click="addDepartmentFun()">确认</el-button>
  </el-dialog>

  <el-dialog
      v-model="setDepartmentShow"
      title="设置部门"
      width="30%"
      destroy-on-close
      center>
    部门:<el-select v-model="setDepartmentData.departmentId" class="m-2" placeholder="Select"
               clearable="clearable">
      <el-option
          v-for="item in departmentInfo.arr"
          :key="item.id"
          :label="item.departmentName"
          :value="item.id"
      />
    </el-select>
    <el-button @click="setDepartmentShow = false">Cancel</el-button>
    <el-button type="primary" @click="setDepartmentFun()">Confirm</el-button>
  </el-dialog>
</template>

<script lang="ts" setup>
import {
  addDepartmentApi,
  delDepartmentApi,
  modifyBasicInfo,
  search,
  searchDepartment,
  setDepartmentApi
} from "../../api/api";
import {reactive} from "@vue/reactivity";
import {onBeforeMount, onMounted, ref} from "vue";
import {ElMessage} from "element-plus";

const clearable = ref(true)
const small = ref(false)
const background = ref(false)
const disabled = ref(false)
let tableSize = ref(0)

let searchData = reactive({
  pageSize: 10,
  pageNum: 1,
  nickName: '',
  qq: '',
  phone: '',
  department: null
})
let tableData = ref([{
  id: '',
  nickName: '',
  address: '',
  qqInfo: '',
  email: '',
  phone: '',
  department: 0,
  college: '',
  grade: '',
  isEnable: 0,
}])
let departmentInfo = reactive({
  arr: [{
    departmentName: '',
    id: 0
  }]
})

function searchInfo() {
  search(searchData)
      .then(res => {
        tableData.value = res.data.list;
        tableSize.value = res.data.count;
      })
      .catch(error => {
        console.log(error)
      })
}

function searchDepartmentRequest() {
  let searchDepartmentRequestData = reactive({
    pageSize: -1,
    pageNum: 1
  })
  searchDepartment(searchDepartmentRequestData)
      .then(res => {
        // @ts-ignore
        if (200 !== res.code) {
          alert('获取信息错误!')
        } else {
          departmentInfo.arr = res.data.list;
        }
      })
      .catch(error => {
        console.log(error);
      })
}

function replaceCode(val: number) {
  let replaceName = ''
  departmentInfo.arr.forEach(info => {
    console.log(info)
    if (info.id == val) {
      replaceName = info.departmentName;
    }
  })
  return replaceName
}

function userInfoChange(id: string) {
  centerDialogVisible.value = true;
  modifyStateId = id;
}

const handleSizeChange = (val: number) => {
  searchInfo();
}
const handleCurrentChange = (val: number) => {
  searchInfo();
}

const centerDialogVisible = ref(false)
let modifyStateId = ''

function modify(state: boolean) {
  if (state) {
    modifyBasicInfo(modifyStateId)
        .then(res => {
          // @ts-ignore
          if (res.code !== 200) {
            ElMessage.error('修改状态失败!')
            // alert('修改状态失败!')
          } else {
            ElMessage.success('修改状态成功!')
          }
        })
        .catch(error => {
          console.log(error)
        })
        .finally(() => {
          searchInfo();
        })
  } else {
    searchInfo();
  }
  modifyStateId = ''
  centerDialogVisible.value = false
}

let departmentDialog = ref(false);
let departmentDialogAdd = ref(false);
let addDepartmentName = reactive({
  department: ''
})

function addDepartmentFun() {
  if (addDepartmentName.department === '') {
    ElMessage.error('部门名字为空!')
  } else {
    addDepartmentApi(addDepartmentName)
        .then(res => {
          // @ts-ignore
          if (200 !== res.code) {
            ElMessage.error(res.data);
          } else {
            ElMessage.success('添加部门成功!');
            searchDepartmentRequest();
            departmentDialogAdd.value = false;
          }
        })
        .catch(error => {
          console.log(error)
        })
  }
}

function deleteDepartmentFun(id: number) {
  delDepartmentApi(id)
      .then(res => {
        // @ts-ignore
        if (200 !== res.code) {
          ElMessage.error(res.data);
        } else {
          ElMessage.success('删除成功!');
          searchDepartmentRequest();
        }
      })
}

let setDepartmentShow = ref(false)
let setDepartmentData = reactive({
  id:'',
  departmentId:''
})
function showSetDepartmentDialog(id : string) {
  setDepartmentData.id = id;
  setDepartmentShow.value = true;
}
function setDepartmentFun(){
  setDepartmentApi(setDepartmentData)
  .then(res=>{
    // @ts-ignore
    if (res.code !== 200){
      ElMessage.error('更新失败!');
    }else {
      ElMessage.success('更新成功!');
    }
  }).catch(error=>{
    console.log(error)
  }).finally(()=>{
    setDepartmentShow.value = true;
    searchInfo();
  })
}

onBeforeMount(() => {
  searchDepartmentRequest();
})

onMounted(() => {
  searchInfo();
})
</script>

<style scoped>

</style>
